<template>
  <div>
    <Load v-show="loading"/>
    <Star style="position: absolute"/>
      <div id="loginBG">
        <div class="loginbox case-content">
          <div class="imgleft"></div>
          <div class="logoin">
            <div class="logintopimg"></div>
            <el-form :model="user" :rules="rules" ref="userForm">
              <el-form-item prop="username">
                <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="user.username"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input size="medium" style="margin: 10px 0" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>
              </el-form-item>
              <el-form-item style="margin: 10px 0; text-align: right">
                <el-button type="primary" size="medium" style="width: 100%"  autocomplete="off" @click="login" >登录</el-button>
                <el-button type="warning" size="small"
                           style="width: 100%; margin-left: 0; margin-top: 20px;"
                           autocomplete="off"
                           @click="$router.push('/register')">注1册</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
  </div>


</template>


<script>

import Load from "@/common/Load";
import Star from "@/common/Star";

import {setRouters} from "@/router";


export default {
  name: 'Login',
  components:{
    Load,    //加载动画
    Star,
  },
  data () {
    return {
      loading: false,
      showmain: true,
      user: {
        username: '',
        password: ''
      },
      rules:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
      }
    }
  },

  methods:{
      login(){
        this.$refs["userForm"].validate((valid) => {
          if (valid) {
            this.loading =true;
            //表单校验合法
            this.request.post("/user/login",this.user).then(res=>{
              if(res.code === "200"){
                this.loading =true;
                localStorage.setItem("user",JSON.stringify(res.data.data))  //存储用户信息到浏览器
                localStorage.setItem("token",res.data.token)
                //动态路由设置当前用户的路由权限
                setRouters();
                this.openFullScreen2(res);
              }else {
                this.openFullScreen2(res);
              }
            })
          } else {
            this.$message.info("请检查")
            return false;
          }
        });

      },
    openFullScreen2(res) {

      setTimeout(() => {
        if(res.code === "200"){
          this.$message.success("登陆成功欢迎你：" + res.data.data.nickname)
          if(res.data.data.role !== "ROLE_ADMIN"){
            this.$router.push("/front/home")
          }else{
            this.$router.push("/blogHome")
          }
        }else {
          this.loading =false;
          this.$message.error(res.msg)
        }


      }, 5000);
    }
  }

}
</script>

<style  scoped>

#loginBG{
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size:cover;
  position: absolute;
}
.loginbox{
  width: 800px;
  height: 400px;
  background: white;
  border-radius: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin:-200px 0 0 -400px;
}
.imgleft{
  width: 440px;
  height: 400px;
  border-radius: 15px 0 0 15px;
  background: url(../../assets/imgleft.webp) 50% 50% no-repeat;
  background-size: 150% 105%;
  position: absolute;
}
.logoin{
  width: 250px;
  height: 400px;
  position: absolute;
  alignment: center;
  right:  50px;
}
.logintopimg{
  width: 250px;
  height: 150px;
  background: url(../../assets/backlogo.png) no-repeat  center;
  background-size: 150% 150%;

}

.case-content {
  -webkit-box-shadow: 0 3px 50px rgba(0,0,0,0.4),0 0 50px rgba(0,0,0,0.2) inset;
  -moz-box-shadow: 0 3px 50px rgba(0,0,0,0.4),0 0 50px rgba(0,0,0,0.2) inset;
  box-shadow: 0 50px 50px rgba(0,0,0,0.8),0 0 10px rgba(0,0,0,0.3) inset;
  -o-box-shadow:0 3px 50px rgba(0,0,0,0.4),0 0 50px rgba(0,0,0,0.2) inset;
}

.case-content:before ,.case-content:after{
  z-index: -1;
  content: "";
  top: 50%;
  bottom: 0;
  left: 10px;
  right: 10px;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0 0 20px rgba(0,0,0,0.8);
  box-shadow: 0 0 20px rgba(0,0,0,0.8);
  -o-box-shadow:0 0 20px rgba(0,0,0,0.8);
  border-radius: 100px/10px;
}

</style>
